Component({
  mixins: [],
  data: {
    that:this,
  },
  props: {},
  didMount() {
    this.setData({
       item:this.props.data,
      loop:this.props.data.loop || false,
      width:this.props.data.style.width,
      height:this.props.data.style.height,
      multigraph:this.props.data.multigraph,
      multigraphSrc:this.props.data.multigraphSrc,
      allTime:this.props.data.totalDuration,
    },()=>{
   this.second= this.props.data.second 
      this.startPlay();
    })
  },
  didUpdate(){
  },
  didUnmount() {
    //   abortAnimationFrame(this.requestID)
  },
  methods: {
    //初始化动画播放
    startPlay(){
        // console.log("startPlay")
        let { allTime } = this.data;
        if (!allTime) {
            this.startTime = new Date().getTime();
            this.playStutas = 'play';
            this.play = true;
            this.animationLoop1();
            return
        };
        this.startTime = new Date().getTime();
        this.playStutas = 'play';
        this.play = true;
        this.animationLoop();
    },
 animationLoop1(){
        let { multigraphSrc,width}=this.data;
        let currTime = new Date().getTime();
        let allTime = 0;
        multigraphSrc.map(i => {
            return allTime += parseInt(i.interval)
        })
        let deltaTime = currTime - this.startTime;
        if (deltaTime > allTime) {  //毫秒播完
            if (this.second > 1 && !this.data.loop) {
                this.second -= 1;
                this.startPlay()
            } else if (this.data.loop) {
                this.startPlay()
            } else {
                this.playStutas = 'pause';
                return
            }
        }
        if (this.playStutas == 'play') {
            let num = this.startTime;
            let newList = multigraphSrc.map((item, index) => {
                num += parseInt(item.interval);
                return {
                    startTime: num - parseInt(item.interval),
                    endTime: num
                }
            })

      let sequenceanimation=my.createAnimation({
                transformOrigin:"top top",
                duration:0,
                timeFunction:"step-start",
                delay:0,
              });
     for (let i = 0; i < newList.length; i++){
                if (currTime >= newList[i].startTime && currTime < newList[i].endTime) {
                    let newWidth = -width * i;
                     sequenceanimation.translateX(`${newWidth}rpx`).step();
                    break;
                }
            }
            
            this.setData({
                sequence:sequenceanimation.export()
              }) 
            // this.requestID = doAnimationFrame(this.animationLoop1.bind(this));
        }
    },
    //帧动画
    animationLoop(){
        let { multigraphSrc,width,allTime} = this.data;
        let currTime = new Date().getTime();
        let deltaTime = currTime - this.startTime;
        if (deltaTime > allTime) {  //毫秒播完
            if (this.second > 1 && !this.data.loop) {
                this.second -= 1;
                this.startPlay()
            } else if (this.data.loop) {
                this.startPlay()
            } else {
                this.playStutas = 'pause';
                return
            }
        }
         var sequenceanimation=my.createAnimation({
                transformOrigin:"top top",
                duration:0,
                timeFunction:"step-start",
                delay:0,
              });
        if (this.playStutas == 'play') {
            let curr = Math.floor(deltaTime / allTime * multigraphSrc.length)
            let lie = curr % multigraphSrc.length;
            let newWidth = -width * lie;
         sequenceanimation.translateX(`${newWidth}rpx`).step({duration:0});
          this.setData({
                sequence:sequenceanimation.export()
              }) 
            // this.requestID = doAnimationFrame(this.animationLoop.bind(this));
        }
    }
  },
  
});
